<template>
  <a-drawer :title="$t('other.waterLineInfo')" placement="right" :visible="visible" @close="closeDraw" class="base-color-details" width="500">
    <div class='blue-line'>{{ $t('other.waterLineMsg') }}</div>
    <a-row :gutter="24">
      <a-col :span="12">
        <div>{{ $t('deviceManage.waterLineNo') }}：</div>
        <div>{{detailInfo.lineNo}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{ $t('deviceManage.waterLineName') }}：</div>
        <div>{{detailInfo.name}}</div>
      </a-col>
      <a-col :span="12">
        <a-form-item :label="$t('deviceManage.lineType')" name="lineType" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-model:value="detailInfo.lineType" allowClear :options="selectOptions.lineTypeArray">
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item :label="$t('deviceManage.workShop')" name="groupId" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-model:value="detailInfo.groupId" allowClear :options="selectOptions.groupArray">
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <div>{{ $t('hangManage.trackTotal') }}：</div>
        <div>{{detailInfo.masterTrackTotal}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{ $t('deviceManage.puttTotal') }}：</div>
        <div class="mb-20">{{detailInfo.pushRodTotal}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{ $t('hangManage.stationTotalNumber') }}：</div>
        <div class="mb-20">{{detailInfo.stationTatal}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{ $t('deviceManage.stationOnTrackHangerNumber') }}：</div>
        <div class="mb-20">{{detailInfo.stationCoatHangerTotal}}</div>
      </a-col>
      <a-col :span="12">
        <div>MAC：</div>
        <div class="mb-20">{{detailInfo.macAddr}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{ $t('common.remark') }}：</div>
        <div class="mb-20">{{detailInfo.remark}}</div>
      </a-col>
    </a-row>

    <div class='blue-line'>{{ $t('common.createMsg') }}</div>

    <div class="footer">
      <a-button @click="closeDraw">{{ $t('common.cancel') }}</a-button>
    </div>
  </a-drawer>
</template>
 
<script setup>
import { ref } from 'vue'
// import { formatTime } from '@/utils'
let detailInfo = ref({})
let visible = ref(false)

const openDraw = (record) => {
  detailInfo.value = record
  visible.value = true
}

const closeDraw = () => {
  visible.value = false
}

defineExpose({
  openDraw
})
</script>